<template>
    <h2 style="text-align: center;">投资管理</h2>
    <table class="table table-striped table-hover table-bordered">
     <thead>
         <tr>
             <th>投资项目编号</th>
             <th>投资项目名称</th>
             <th>投资项目总金额</th>
             <th>用户已投资金额</th>
             <th>剩余投资金额</th>
             <th>操作</th>
         </tr>
     </thead>
      <tbody>
           <tr v-for="item in info">
               <td>{{item.I_Id}}</td>
               <td>{{item.I_Name}}</td>
               <td>{{item.I_Budget}}</td>
               <td>{{item.UI_Money}}</td>
               <td>{{item.I_Residue}}</td>
               <td><a href="#" @click="SaveData(item.I_Id)">用户赎回详细信息</a></td>
           </tr>
      </tbody>
    </table>
</template>

<script setup lang="ts">
import { ref,onMounted} from 'vue';

import axios from 'axios';

import {useRouter} from 'vue-router';

const router = useRouter();

import {useUserStore} from '../../Store/Index.ts'

const userStore = useUserStore();

//创建响应式数据
const info = ref([{
 I_Id:0,
 I_Name:"",
 I_Budget:0,
 I_Residue:0,
 UI_Money:0,
 UI_Id:0
}])

onMounted(()=>{
 LoadData();
})

const LoadData = ()=>{
 axios({
     url:"https://localhost:44337/api/Invests/ShowAllInvestRedeemInfo",
     method:"get",
     params:{
         Uid:userStore.Uid
     }
 }).then(res=>{
     console.log(res.data);
     info.value = res.data;
    
 }).catch
 (err=>{
     console.log(err);
 })
}


//跳转到用户投资赎回明细页
const SaveData =(Iid:number)=>{
    router.push({
         name:'AllUserInvestRemdeemPage',
         params:{
             Iid:Iid
         }
     })
}
</script>
